<style type="text/css">
textarea{
	width:400px;
}
</style>
<h1>SEARCH PAGE</h1>

<form name="article">
<div>
<fieldset>
<legend>Search Article</legend>
	<p>
		Fields : 
		<select name="fields-1">
		<option value="">-- Please select --</option>
		<?php
			for($i=0; $i < count($metadataFieldsList); $i++) {
		?>
		<option value="<?php echo $metadataFieldsList[$i]; ?>"><?php echo $metadataFieldsList[$i]; ?></option>
		<?php } ?>
		</select>
	</p>
	<p>
		Text :
		<textarea name="searchtext-1" style="display:block;"></textarea>
	</p>
	<p>
		Fields : 
		<select name="fields-2">
		<option value="">-- Please select --</option>
		<?php
			for($i=0; $i < count($metadataFieldsList); $i++) {
		?>
		<option value="<?php echo $metadataFieldsList[$i]; ?>"><?php echo $metadataFieldsList[$i]; ?></option>
		<?php } ?>
		</select>
	</p>
	<p>
		Text :
		<textarea name="searchtext-2" style="display:block;"></textarea>
	</p>
	<p>
		Fields : 
		<select name="fields-3">
		<option value="">-- Please select --</option>
		<?php
			for($i=0; $i < count($metadataFieldsList); $i++) {
		?>
		<option value="<?php echo $metadataFieldsList[$i]; ?>"><?php echo $metadataFieldsList[$i]; ?></option>
		<?php } ?>
		</select>
	</p>
	<p>
		Text :
		<textarea name="searchtext-3" style="display:block;"></textarea>
	</p>
	<p>
		<input type="button" value="Submit" onclick="searchArticle();"/>
	</p>
</fieldset>
</div>
</form>

<div id="searchResult">
</div>

<script type="text/javascript">
	function searchArticle() {
		jQuery.post('<?php echo $this->Html->url('/Search/searchArticle');?>',
					jQuery("form[name='article']").serialize(),
					function(data) {
						jQuery('#searchResult').html(data);
// 						var resultHtml = "";
// 						jQuery.each(data, function(i, val) {
// 							resultHtml += i + " : " + val + "<br />";
// 						});
// 						jQuery('#searchResult').html(resultHtml);
					});
	}

	function disableInput() {
	}
</script>